<template>
  <div class="elective_list">
    <div class="major choose_box">
      <van-sticky :offset-top="85" @scroll="topNumber"></van-sticky>
      <div v-if="navList && navShow" :class="numberTop ? 'nav_list nav_list_active' : 'nav_list'">
        <div class="top_list">
          <div :class="navActive === navList.edu_type_id.name ? 'top_item top_active' : 'top_item'" @click="navActive = navList.edu_type_id.name"><span>{{edu_type_id_name}}</span><van-icon name="arrow-down" /></div>
          <div :class="navActive === navList.major_type_id.name ? 'top_item top_active' : 'top_item'" @click="navActive = navList.major_type_id.name"><span>{{major_type_id_name}}</span><van-icon name="arrow-down" /></div>
          <div :class="navActive === navList.college_id.name ? 'top_item top_active' : 'top_item'" @click="navActive = navList.college_id.name"><span>{{college_id_name}}</span><van-icon name="arrow-down" /></div>
          <div :class="navActive === navList.edu_level.name ? 'top_item top_active' : 'top_item'" @click="navActive = navList.edu_level.name"><span>{{edu_level_name}}</span><van-icon name="arrow-down" /></div>
        </div>
        <div v-if="navActive === navList.edu_type_id.name" class="tab_list">
          <div v-for="item in navList.edu_type_id.data" :key="item.id + item.name" :class="itemActive === item.name ?'item_a cur' : 'item_a'" @click="openNav(item.id, item.name)">{{item.name}}</div>
        </div>
        <div v-if="navActive === navList.major_type_id.name" class="tab_list">
          <div v-for="item in navList.major_type_id.data" :key="item.id + item.name" :class="itemActive === item.name ?'item_a cur' : 'item_a'" @click="openNav(item.id, item.name)">{{item.name}}</div>
        </div>
        <div v-if="navActive === navList.college_id.name" class="tab_list">
          <div v-for="item in navList.college_id.data" :key="item.id + item.name" :class="itemActive === item.name ?'item_a cur' : 'item_a'" @click="openNav(item.id, item.name)">{{item.name}}</div>
        </div>
        <div v-if="navActive === navList.edu_level.name" class="tab_list">
          <div v-for="item in navList.edu_level.data" :key="item.id + item.name" :class="itemActive === item.name ?'item_a cur' : 'item_a'" @click="openNav(item.id, item.name)">{{item.name}}</div>
        </div>
      </div>
      <div class="list" :style="{paddingTop : numberTop && navShow ? '1.1rem':'0'}">
        <ul>
          <van-list
              v-model="loading"
              :finished="finished"
              @load="onLoad">
            <li v-for="(item, index) in listData" :key="item.product_id +' '+ index" @click="$router.push({ path:'/elective-detail', query:{ id: item.product_id }})">
              <img :src="item.product_image[0] ? item.product_image[0].image_url : 'http://m.oucgz.cn/icon_no_img_z.png'" alt="">
              <div class="info">
                <h3>{{item.product_name}}</h3>
                <p>{{item.proxy_school_info.school_name}}</p>
                <p>{{item.sign_up_num}}人预约报名</p>
                <span v-for="itemTag in item.tag" :key="itemTag.tag_id"><i class="ico_hot"></i>{{itemTag.tag_name}}</span>
              </div>
            </li>
            <!--加载状态-->
            <div v-if="loading">
              <van-skeleton
                  style="margin-top: 30px"
                  title
                  v-for="item in 5" :key="item"
                  :row="2">
              </van-skeleton>
            </div>
            <div v-if="footerShow" class="no_data_title">
              <img v-if="noDataImg" src="../../../assets/img/modules/media/icon_v2_4.png" alt="">
              <p>没有内容了~</p>
            </div>
          </van-list>
        </ul>
      </div>
      <!--选择遮罩-->
      <div v-if="navActive !== '0'" class="model_ph" @click="navActive = '0'"></div>
    </div>
  </div>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
  name: 'elective_list',
  components: {},
  data () {
    return {
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      footerShow: false, // 底部标志显示
      noDataImg: false, // 完全没数据显示
      searchActive: false, // 搜索框显示
      navShow: true, // 显示筛选
      listData: [],
      navActive: '0',
      numberTop: false,
      itemActive: '',
      navList: null,
      tag_id: '',
      searchValue: '', // 搜索内容
      major_type_id: '',
      edu_type_id: '', // 全部
      edu_level: '', // 层次
      college_id: '', // 主院校ID
      current: 1, // 当前页
      size: 10, // 每页条数
      edu_type_id_name: '',
      major_type_id_name: '',
      college_id_name: '',
      edu_level_name: ''
    }
  },
  props: {},
  watch: {
  },
  methods: {
    /* wf_Huang 2019/9/21 0021 距离顶部的距离 */
    topNumber (index) {
      if (index.scrollTop > 1250) {
        this.numberTop = true
      } else {
        this.numberTop = false
      }
    },
    /* wf_Huang 2019/9/19 0019 获取下拉列表 */
    getNavList () {
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/conditionParam.html?school_id=${this.$store.state.elective.school_id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        this.navList = res.data
        this.edu_type_id_name = res.data.edu_type_id.name
        this.major_type_id_name = res.data.major_type_id.name
        this.college_id_name = res.data.college_id.name
        this.edu_level_name = res.data.edu_level.name
      }).catch(() => {})
    },
    onLoad: debounce(function () {
      this.getList()
    }, 100, { 'leading': true, 'trailing': false }),
    /*
           *@author wf_Huang
           *@Time 2019/8/18 0018 18:30
           *@function  获取列表
           *****************************************/
    getList () {
      if (this.current === 1) {
        this.listData = []
      }
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/getSaleProductList.html?page=${this.current}&limit=${this.size}&tag_id=${this.tag_id}&edu_level=${this.edu_level}&edu_type_id=${this.edu_type_id}&major_type_id=${this.major_type_id}&learn_center_id=${this.$store.state.elective.center_id}&college_id=${this.college_id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('文章列表查询失败~')
          return false
        }
        if (res.data.list.length < this.size) {
          this.footerShow = true
          this.finished = true
        } else {
          this.footerShow = false
        }
        if (this.current === 1 && res.data.list.length === 0) {
          this.noDataImg = true
        } else {
          this.noDataImg = false
        }
        res.data.list.forEach(item => {
          this.listData.push(item)
        })
        this.loading = false
        this.current = this.current + 1
      }).catch(() => {})
    },
    /* wf_Huang 2019/9/19 0019 筛选条件 */
    openNav (id, name) {
      this.itemActive = name
      if (this.navActive === '全部') {
        this.edu_type_id = id
        this.edu_type_id_name = name
      } else {
        this.edu_type_id = ''
        this.edu_type_id_name = '全部'
      }
      if (this.navActive === '专业分类') {
        this.major_type_id = id
        this.major_type_id_name = name
      } else {
        this.major_type_id = ''
        this.major_type_id_name = '专业分类'
      }
      if (this.navActive === '院校') {
        this.college_id = id
        this.college_id_name = name
      } else {
        this.college_id = ''
        this.college_id_name = '院校'
      }
      if (this.navActive === '层次') {
        this.edu_level = id
        this.edu_level_name = name
      } else {
        this.edu_level = ''
        this.edu_level_name = '层次'
      }
      this.finished = false
      this.current = 1
      this.navActive = '0'
      this.onLoad()
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    this.getNavList()
    if (this.$route.query.tag_id || this.$route.query.major_type_id) {
      this.navShow = false
      this.tag_id = this.$route.query.tag_id || ''
      this.major_type_id = this.$route.query.major_type_id || ''
    } else {
      this.navShow = true
    }
    // 老刘说跟院校ID 一样的赋值给 有问题找老刘
    if (this.$route.query.detail_school_id) {
      this.navShow = false
      this.college_id = this.$route.query.detail_school_id
    } else {
      if (this.$store.state.elective.ismian === '1') { // navShow  领航显示  领航默认ismian=0
        this.college_id = this.$store.state.elective.school_id
        this.navShow = false
      } else {
        this.college_id = ''
        this.navShow = true
      }
    }
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .elective_list {
    min-height: 1600px;
    .choose_box{
      background: #fff;
      padding: 40px 0 40px;
      margin-bottom:20px;
    }
    .major{
      font-size:0;
      position: relative;
      .model_ph{
        position: absolute;
        top: 150px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
      }
      .nav_list{
        margin: 0 0 40px;
        position: relative;
        background-color: #ffffff;
        .top_list{
          display: flex;
          border-top: 2px solid #efefef;
          border-bottom: 2px solid #efefef;
          .top_item{
            line-height: 90px;
            flex: 1;
            color: #333333;
            font-size: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            span{
              max-width: 140px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            i{
              margin-left: 5px;
              color: #999999;
            }
          }
          .top_active {
            position: relative;
            &:before{
              content: '';
              position: absolute;
              bottom: 0;
              left: 50%;
              z-index: 1;
              background-color: transparent;
              transform: translateX(0) translateX(-50%);
              width:0 !important;
              height:0  !important;
              z-index: 1;
              border-right:15px solid transparent;
              border-left:15px solid transparent;
              border-bottom:15px solid #efefef;
            }
            &:after{
              content: '';
              position: absolute;
              bottom: -2px;
              left: 50%;
              z-index: 2;
              transform: translateX(0) translateX(-50%);
              width:0 !important;
              height:0  !important;
              border-right:15px solid transparent;
              border-left:15px solid transparent;
              border-bottom:15px solid #ffffff;
            }
          }
        }
        .tab_list{
          max-height: 400px;
          overflow: auto;
          z-index: 6;
          position: absolute;
          background-color: #ffffff;
          box-shadow: 0 5px 10px rgba(0,0,0,0.1);
          left: 0;
          right: 0;
          top: 94px;
          .item_a{
            margin-left: 15px;
            line-height: 80px;
            color: #999999;
            font-size: 26px;
            border-bottom: 1px solid #efefef;
          }
          .cur{
            color: rgb(255, 128, 26);
          }
        }
      }
      .nav_list_active{
        position: fixed;
        left: 0;
        right: 0;
        top: 180px;
        z-index: 99;
        background-color: #ffffff;
      }
      .list{
        padding: 0 30px;
        ul{
          li{
            overflow:hidden;
            height:180px;
            margin-bottom:30px;
            img{
              width:180px;
              height:180px;
              float:left;
              margin-right:30px;
            }
            .info{
              overflow:hidden;
              h3{
                font-size:32px;
                color:#222;
                line-height:44px;
                height:40px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 1;
                margin:0 0 20px;
              }
              p{
                font-size:24px;
                color:#666;
                margin:0 0 20px;
              }
              span{
                display:inline-block;
                height:34px;
                line-height:34px;
                background:#FFF8EB;
                font-size:22px;
                margin-right: 10px;
                color:#FF0000;
                padding:0 15px;
                border-top-left-radius: 17px;
                border-bottom-right-radius: 17px;
                .ico_hot{
                  display: inline-block;
                  width: 16px;
                  height: 20px;
                  background: url(../../../assets/img/modules/elective/icon_hot.png)
                  no-repeat;
                  background-size: 16px 20px;
                  margin-right: 10px;
                  position: relative;
                  top: 2px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
